<template>
  <div class="">
    <!-- 上、左展开按钮 -->
    <div ref="showAllTopBotton" v-show="isNeedButton && isShowButton" @click.stop="changeShowAll">
      <slot :isShowAll="isShowAll" name="showAllTopBotton"></slot>
    </div>
    <!-- 内容 -->
    <div ref="content" :style="isShowAll ? '' : `max-height: ${limitHeight}px;`" :class="isShowAll ? '' : 'c-text-hidden '">
      <slot :isShowAll="isShowAll" name="content"></slot>
    </div>
    <!-- 下、右展开按钮 -->
    <div ref="showAllBotton" v-show="isNeedButton && isShowButton" @click.stop="changeShowAll">
      <slot :isShowAll="isShowAll" name="showAllBotton"></slot>
    </div>
  </div>
</template>

<script scoped>
// 文本等内容到达一定高度（limitHeight）隐藏，点击展开
export default {
  name: 'flexibleBox',
  props: {
    limitHeight: { // 超过limitHeight高度即要隐藏省略
      type: Number,
      default: 100
    },
    extraHeight: { // 额外高度，用于判断单行时，部分需要多出的边距
      type: Number,
      default: 0
    },
    isShowButton: { // 除了高度超过省略外，其他判断是否展示展开收起按钮的条件
      type: Boolean,
      default: true
    },
    isExShowAll:  { // 外部按钮控制是否展开全部
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      isShowAll: true, // 是否展示全部
      isNeedButton: false, // 是否需要展开按钮
    }
  },
  watch: {
    isExShowAll(val) {
      this.isShowAll = val;
    }
  },
  mounted() {
    this.checkHeight();
  },
  methods: {
    checkHeight() {
      this.isShowAll = true;
      this.isNeedButton = false;
      this.$nextTick(() => {
        let timer = setTimeout(() => {
          if (this.$refs.content && this.$refs.content.offsetHeight > (this.limitHeight + this.extraHeight)) {
            this.isShowAll = false;
            this.isNeedButton = true;
          } else {
            this.isShowAll = true;
          }
          clearTimeout(timer);
        }, 250);
      })
    },
    changeShowAll() {
      this.isShowAll = !this.isShowAll;
    },
  },
}
</script>

<style >
</style>